<template>
    <div class="column-list">
        <div class="item" v-for="item in list" :key="item.id">
            <a-avatar :size="64" class="avatar" :src="item.avatar"></a-avatar>
            <h5 class="card-title">{{item.title}}</h5>
            <p>{{item.description}}</p>
            <!-- <router-link :to="`/column/${column.id}`" class="btn btn-outline-primary">进入专栏</router-link> -->
            <router-link :to="`/column-detail/${item.id}`">进入专栏</router-link>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
interface columnProp {
    id: number;
    title: string;
    avatar?: string;
    description: string;
}
export default defineComponent({
    name: 'column-list',
    props: {
        list: {
            type: Object as PropType<columnProp>,
            require: true
        }
    },
    setup() {
        return {}
    }
})
</script>

<style lang="less" scoped>
.column-list {
    display: flex;
    flex-wrap: wrap;
    .item {
        width: 380px;
        height: 260px;
        margin-right: 30px;
        margin-bottom: 30px;
        border: 1px solid rgba(0,0,0,.125);
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        &:nth-of-type(3n) {
            margin-right: 0px;
        }
        .avatar {
            margin-top: 20px;
        }
        h5 {
            font-size: 20px;
            color: #212529;
            margin-bottom: 10px;
            margin-top: 10px;
        }
        p {
            font-size: 16px;
            color: #6c757d;
            height: 46px;
            overflow: hidden;
        }
        a {
            display: inline-block;
            width: 90px;
            height: 36px;
            border: 1px solid #0d6efd;
            line-height: 36px;
            text-align: center;
            color: #0d6efd;
            border-radius: 5px;
        }
    }
}
</style>